<!-- 备案申请表 -->
<template>
<section class="content" id="content">
  <lq-form :form="form" :rules="rules" ref="addRegsterInfoRef">
    <template #reportAddress1_2="scope">
      <el-row>
        <el-col :span="8">
          <el-input v-model="form.model.reportAddress1" placeholder="填报单位地址"></el-input>
        </el-col>
        <el-col :span="16">
          <el-input v-model="form.model.reportAddress2" placeholder="填报单位地址" style="padding-left: 5px;"></el-input>
        </el-col>
      </el-row>
    </template>
    <template #hazardAddress1_2="scope">
      <el-row>
        <el-col :span="8">
          <el-input v-model="form.model.hazardAddress1"></el-input>
        </el-col>
        <el-col :span="16">
          <el-input v-model="form.model.hazardAddress2" style="padding-left: 5px;"></el-input>
        </el-col>
      </el-row>
    </template>
  </lq-form>
</section>
</template>

<script setup lang="ts">
/**
 * 全局方法引入
 */
const global = getCurrentInstance().appContext.config.globalProperties;

import {
  ref,
  reactive,
  onMounted,
  toValue,
  defineExpose,
  defineEmits,
  getCurrentInstance, inject
} from "vue";
import {FormInstance, FormRules} from "element-plus";

import {ElMessage, ElMessageBox} from "element-plus";
import LqForm from "@/pages/components/LqForm.vue";
import commonConst from "@/config/const";
import {editKey} from "../../components/keys.js";

const optCase = inject(editKey);

/*
const emit = defineEmits<{
  (e: 'flush', value: Object): void
}>()
*/

// 表单数据结构
const form = ref({
  innerAttrs: {
    size: 'default',
    labelPosition: 'right',
    labelWidth: 150,
    disabled: false,
  },
  model: {
    hazardCode: '',
    legalUnitName: '',
    reportUnitName: '',
    reportAddress1: '',
    reportAddress2: '',
    hazardName: '',
    hazardAddress1: '',
    hazardAddress2: '',
    reportUnitHeadName: '',
    reportUnitHeadPhone: '',
    reporterName: '',
    reporterPhone: '',
    reporterMail: '',
    reporterFax: '',
    employeeCount: '',
    entArea: '',
    applicationType: '',
    businessTypeName: '',
    industryTypeName: '',
    hazardLevel: '',
    entType: '',
    sort: ''
  },
  formItems: [
    {type: 'input', label: '法人单位名称: ', prop: 'legalUnitName', span: 24, maxlength: 50, placeholder: '法人单位名称'},
    {type: 'input', label: '填报单位名称: ', prop: 'reportUnitName', span: 24, maxlength: 50, placeholder: '填报单位名称'},
    {type: 'slot', label: '填报单位地址: ', prop: 'reportAddress1_2',labelPosition: 'right', style:'padding-right: 0px; padding-left: 0px;' },
    {type: 'input', label: '重大危险源名称: ', prop: 'hazardName', span: 24, maxlength: 36, placeholder: '重大危险源名称'},
    {type: 'slot', label: '重大危险源所在地址: ', prop: 'hazardAddress1_2',labelPosition: 'right', style:'padding-right: 0px; padding-left: 0px;' },
    {type: 'input', label: '填报单位负责人姓名: ', prop: 'reportUnitHeadName', span: 12, placeholder: '填报单位负责人姓名'},
    {type: 'input', label: '电话: ', prop: 'reportUnitHeadPhone', span: 12, placeholder: '填报单位负责人电话'},
    {type: 'input', label: '填报人姓名: ', prop: 'reporterName', span: 12, placeholder: '填报人姓名'},
    {type: 'input', label: '电话: ', prop: 'reporterPhone', span: 12, placeholder: '填报人电话'},
    {type: 'input', label: '电子邮箱: ', prop: 'reporterMail', span: 12, placeholder: '电子邮箱', },
    {type: 'input', label: '传真: ', prop: 'reporterFax', span: 12, placeholder: '传真'},
    {type: 'input', label: '单位从业人员数量（人）: ', prop: 'employeeCount', span: 12, placeholder: '单位从业人员数量（人', },
    {type: 'input', label: '占地面积（m2）: ', prop: 'entArea', span: 12, placeholder: '占地面积（m2）', },
    {type: 'radio', label: '备案申请类型: ', prop: 'applicationType', span: 24, options: commonConst.applicationTypeList, },
    {type: 'input', label: '危险化学品单位类型: ', prop: 'businessTypeName', span: 12, placeholder: '危险化学品单位类型', },
    {type: 'blank', span: 12},
    {type: 'input', label: '所属行业: ', prop: 'industryTypeName', span: 12, placeholder: '所属行业', },
    {type: 'select', label: '重大危险源级别: ', prop: 'hazardLevel', span: 12, options: commonConst.majorHazardLevelList, },
    {type: 'input', label: '企业类型: ', prop: 'entType', span: 12, placeholder: '企业类型', },
  ],
  buttonsAttrs: {
    // align: 'center'
  }
});

// 表单验证规则
const rules = reactive<FormRules>({
  legalUnitName: [{ required: true, message: '请输入法人单位名称', trigger: 'blur'}],
  reportUnitName: [{ required: true, message: '请输入填报单位名称', trigger: 'blur'}],
  hazardName: [{ required: true, message: '请选择重大危险源名称', trigger: 'blur'}],
  reportUnitHeadName: [{ required: true, message: '请输入填报单位负责人姓名', trigger: 'blur'}],
  reportUnitHeadPhone: [{ required: true, message: '请输入填报单位负责人电话', trigger: 'blur'}],
  reporterName: [{ required: true, message: '请输入填报人姓名', trigger: 'blur'}],
  reporterPhone: [{ required: true, message: '请输入填报人电话', trigger: 'blur'}],
  applicationType: [{ required: true, message: '请选择备案申请类型', trigger: 'change'}],
});

// 表单验证规则
const addRegsterInfoRef = ref<FormInstance>();

const handleSubmit = async () => {
  const valid = await addRegsterInfoRef.value?.validateForm();
  return valid;
}
//重置表单
const handleReset = () => {
  addRegsterInfoRef.value?.resetFields();
  form.value.model.hazardAddress1 = '';
  form.value.model.hazardAddress2 = '';
  form.value.model.reportAddress1 = '';
  form.value.model.reportAddress2 = '';
}

const getModel = () => {
  return form.value.model;
}

const disableForm = () => {
  return form.value.innerAttrs.disabled = true;
}

defineExpose({
  handleSubmit,
  handleReset,
  getModel,
  disableForm
})

onMounted(() => {
  if (optCase.value.operaCase==='view'){
    form.value.innerAttrs.disabled = true;
  } else {
    form.value.innerAttrs.disabled = false;
  }
  console.log('备案申请表 >> onMounted, InfoId:%s, HazardCode:%s', optCase.value.hazardInfoId, optCase.value.hazardCode);

  if (optCase.value.operaCase==='view' || optCase.value.operaCase==='edit') {
    global.$api.getMajorHazardRegisterInfoById({
      hazardInfoId: optCase.value.hazardInfoId,
      hazardCode: optCase.value.hazardCode
    })
    .then(({data}) => {
      if (data.status === 'OK') {
        form.value.model = data.data;
      }
    });
  }
})
</script>

<style scoped lang="sass">

</style>
